<template>
  <view style="min-height: 100vh; background-color:#F5F5F5;padding: 24rpx 32rpx 0 32rpx;">
    <!--  :background="navbartop ? '{ backgroundColor: #FFFFFF}' : '{ backgroundColor: red}'" -->
    <u-navbar :border-bottom="!navbartop" title-size="48" back-text="" :title="navbartop ? '' : '评论'"
      :background="navbartop ? background : backgroundtwo"></u-navbar>
    <view class="content">
      <view v-show="navbartop" style="padding:30rpx 222rpx 26rpx 222rpx;">
        <view style="text-align: center;font-weight: 400;font-size: 48rpx;color: #000000;">评论已完成</view>
        <view style="text-align: center; font-weight: 400;font-size: 28rpx;color: #999999;margin-top:18rpx;">
          欢迎再次光临</view>
      </view>
      <view class="commentstop">
        <view>{{ orderlist.merchantName }}</view>
        <view style="display: flex;margin-top:18rpx;">
          <view>
            <image style="width: 156rpx; height:132rpx;" :src="orderslist.productImg" mode="scaleToFill" />
          </view>
          <view style="margin-left: 24rpx; flex:1;">
            <view style="font-weight: 400;font-size: 32rpx;color: #000000;">{{ orderslist.merchantName }}
            </view>
            <view style="display: flex; justify-content: space-between;margin-top:38rpx;align-items:center;">
              <view style="font-weight: 400;font-size: 26rpx;color: #999999;">x{{ orderslist.productCount
                }}</view>
              <view>
                <text style="font-weight: bold;font-size: 28rpx;color: #FF0000;">￥</text>
                <text style="font-weight: bold;font-size: 36rpx;color: #FF0000;">{{
                  orderslist.productTotalPrice / 100 }}</text>
              </view>
            </view>
          </view>
        </view>
        <view style="display: flex; justify-content:space-between;margin-top:24rpx;">
          <view style="font-weight: 400;font-size: 32rpx;color: #000000;">支付方式</view>
          <view style="display: flex; align-items:center;">
            <image style="width:36rpx;height:36rpx;" src="../static/image/pagesDelivery/alipay.png" mode="scaleToFill" />
            <text style="font-weight: 600; color: #424141;">支付宝</text>
          </view>
        </view>
      </view>
      <view style="margin-top:18rpx;" class="commentstop">
        <view style="display: flex;">
          <view style="font-weight: 400;font-size: 28rpx;color: #000000;">给商品打个分吧</view>
          <view style="margin:0 40rpx;"><u-rate :count="count" v-model="value"></u-rate></view>
          <view>{{ value }}分</view>
        </view>
        <view style="margin-top: 48rpx;">
          请输入评价内容
        </view>
        <view style="margin-top: 18rpx;">
          <u-input placeholder="展开说说你对商品的想法吧..." v-model="commentinput" type="textarea" :height="172" :border="true"
            :auto-height="true" :disabled="isDisabled" />
        </view>
        <view style="margin-top: 24rpx;">
          上传照片
        </view>
        <view style="margin-top: 18rpx;">
          <view class="pre-box">

            <u-upload width="150" height="150" :custom-btn="true" @on-choose-fail="onChooseFail"
              :before-remove="beforeRemove" ref="uUpload" :show-upload-list="true" :action="action" :auto-upload="true"
              :file-list="fileList" :show-progress="true" :deletable="true" :header="uploadToken" :max-count="6"
              @on-list-change="onListChange" :on-remove="uploadRemove" @on-success="uploadSuccess" :size-type="['compressed']" :max-size="FileSize">
              <view slot="addBtn">
                <image src="/static/image/upload_icon.png" mode=""
                  style="width: 150rpx;height: 150rpx;border-radius: 12rpx;"></image>
              </view>
            </u-upload>
          </view>
        </view>
      </view>
    </view>
    <view v-show="!navbartop" @tap="commentend" class="comment">
      <text>评论</text>
    </view>
  </view>
</template>

<script>
import { getUserOrderInfo, insertEvaluate } from '@/api/common'
import { BASE_URL_IMG } from '@/api/request'
import { debounce, throttle } from 'lodash';
import { FileSize } from '@/common/fileSize';
export default {
  data() {
    return {
      FileSize,
      count: 5,
      value: 0,
      commentinput: '',
      navbartop: false,
      //上传
      lists: [],
      action: '',
      fileList: [],
      background: {
        backgroundColor: '#F5F5F5',
      },
      backgroundtwo: {
        backgroundColor: '#FFFFFF',
      },
      orderNum: '',
      orderlist: [],
      orderslist: [],
      nowFileList: [

      ],
      uploadToken: {
        Authorization: ''
      },
      isDisabled: false,
    }

  },
  onLoad(e) {
    console.log('看看eeee', e)
    this.orderNum = e.orderNum

    this.action = BASE_URL_IMG
    console.log('BASE_URL', this.action);
    this.uploadToken.Authorization = uni.getStorageSync('token')
    this.getorder()
  },
  methods: {
    deleteItem(index) {
      console.log('1')
      this.$refs.uUpload.remove(index);
    },
    onChooseFail(e) {
      console.log(e);
    },
    beforeRemove(index, lists) {
      this.nowFileList.splice(index,1)
      console.log('beforeRemove', this.nowFileList);
    },
    onListChange(lists) {
      console.log('onListChange', lists);
      this.lists = lists;
    },
    uploadRemove(index) {
      this.nowFileList.splice(index,1)
    },
    uploadSuccess(e) {
      const newObject = {
        evaluateAge: e.data
      };
      this.nowFileList.push(newObject);
    },

    commentend: throttle(function () {
      if (this.value > 0) {
        let obj = {
          merchantId: this.orderlist.merchantId,
          appOrderNum: this.orderNum,
          userEvaluate: this.commentinput,
          evaluateAge: this.nowFileList,
          userRatingType: this.value,
          orderType: this.orderlist.orderType
        };
        insertEvaluate(obj).then(res => {
          console.log('评论成功', res);
          this.navbartop = true;
          this.isDisabled = true;
          uni.redirectTo({
            url: '/pagesMine/appraiseAll',
          })
        });
      } else {
        this.$u.toast('请打分');
      }
    }, 1000),
    //订单详情
    getorder() {
      let obj = {
        orderNum: this.orderNum
      }
      getUserOrderInfo(obj).then(res => {
        this.orderlist = res.data
        console.log('订单详情', this.orderlist)
        this.orderslist = res.data.orderProductsList[0]
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.content {

  .commentstop {
    padding: 32rpx 24rpx;
    background-color: white;
    border-radius: 8rpx;

    .pre-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      // .pre-box ::v-deep(.data-v-2e00e22c) {
      // 	width: 0rpx;
      // }	
      .pre-item {
        width: 160rpx;
        height: 150rpx;
        border-radius: 12rpx;
        overflow: hidden;
        position: relative;
        margin: 0 10rpx;
        margin-bottom: 20rpx;
        display: flex;
      }

      .pre-item-image {
        width: 100%;
        height: 100%;
      }

      .u-delete-icon {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        z-index: 10;
        background-color: $u-type-error;
        border-radius: 100rpx;
        width: 44rpx;
        height: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.comment {
  position: fixed;
  bottom: 58rpx;
  border-radius: 1998rpx;
  padding: 26rpx 310rpx;
  text-align: center;
  background-color: #D12C25;
  color: white;
}
</style>